<template>
  <!--  这是粒子效果-->
  <div  class="lizi">
    <vue-particles
        color="#000"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="2"
        linesColor="#000"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi1"


    >
    </vue-particles>
  </div>

  <div class="login" style="overflow: hidden">
      <div style="width: 100%;">
        <div style="color: #000000;font-size: 2.5vw;text-align: center; margin-bottom: 2vw">欢迎登陆</div>
        <el-form ref="form" :model="form" size="large" :rules="rules" >
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="form.username" placeholder="username" style="font-size: 1.5vw; border: 0.1vw solid ; border-radius: 0.6vw">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input :prefix-icon="Lock" v-model="form.password" type="password" show-password style="font-size: 1.5vw;border: 0.1vw solid ; border-radius: 0.6vw" placeholder="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;font-size: 1.5vw;background: #000000;color: #FFFFFF" type="primary" @click="login">登陆</el-button>
          </el-form-item>
        </el-form>
        <div>
          <span style="color: #000000;font-size: 1.2vw;">还没有账号?</span>
          <span style="color: #000000;font-size: 1.2vw;cursor: pointer;text-decoration: underline;margin-left: 1.0vw" @click="this.$router.push('/register')">立即注册</span>
        </div>
        <div>
          <span style="color: #000000;font-size: 1.2vw;cursor: pointer;text-decoration: underline;" @click="getPass">访客进入</span>
        </div>
      </div>
  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "Login",
  data(){
    return{
      form:{},
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
      }
    }
  },
  methods:{
    getPass(){
      sessionStorage.clear();
      this.$router.push("/Home");
    },
    login(){
      this.$refs['form'].validate((valid)=>{
        if(valid){
        request.post("/user/login",this.form).then(res=>{
          if(res.code==='0'){
            this.$message({
              type:"success",
              message:"登陆成功"
            })
            request.get("/user/username=",{
              params:{
                search:this.form.username,
              }
            }).then(res=>{
              this.form=res;
              sessionStorage.setItem("user",JSON.stringify(res))
              console.log(res);
            })
            setTimeout(() => {
              this.$router.push("/Home");
            }, 200);
          }else{
            this.$message({
              type:"error",
              message:res.msg
        })
      }})
        }})
    },
  }
}
</script>
<script setup>
import {User,Lock} from '@element-plus/icons-vue';
</script>
<style scoped>
.login{
  position: absolute;
  top:20%;
  width: 30%;
  left: 35%;
  opacity: 0.5;
}
.lizi {
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
</style>
